<template>
	<view>
		<view style="background-color: #FFFFFF;" >
			<cu-custom :isBack="true">
				<block slot="backText"></block>
				<block slot="content">{{corpCode}}-ASN单到货</block>
			</cu-custom>
		</view>
		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<!-- <input @confirm="sub" v-model="asnId" :focus="true" ></input> -->
				<input @confirm="sub" v-model="asnId" type="text" placeholder="输入搜索的关键词" focus></input>
			</view>
			<!-- <view class="action">
				<button class="cu-btn bg-gradual-green shadow-blur round" @click="toBox">搜索</button>
			</view> -->
			<view class="action" @click="toScan">
				<text class="cuIcon-scan" style="font-size: 56rpx;"></text>
			</view>
		</view>
		<scroll-view @scroll="scroll" scroll-y="true" class="indexes" :scroll-into-view="toSId" :scroll-with-animation="true"
		 :enable-back-to-top="true" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]">
			<view class="padding" style="font-weight: 700; font-size: 16px;">总箱数：{{orderH.itotalboxnum}}  总托数：{{orderH.itotalpalletnum}}</view>
			<view class="padding" style="font-weight: 1000; font-size: 16px;">{{orderH.cvenname}}</view>
			<view>
				<button style="position: absolute;right:30px;top: 110rpx;" class="cu-btn lines-green " @tap="viewDetail(orderH.id)">
					装箱清单
				</button>
			</view>
			<view class="cu-form-group" v-if="this.isShowAsn">
				<view class="title">仓库</view>
				<picker @change="PickerChange" :value="indexs" :range="wArray">
					<view class="picker">
						{{indexs == -1?"请选择仓库！": wArray[indexs]}}
					</view>
				</picker>
			</view>
			<block v-for="(item,index) in orderC" :key="index">
				<view :id="'index_'+item.cinvcode">
					<view v-if="isShowAsn">
						<view class="padding" style="font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 12px;">
							<b style="color: #0081FF;font-size: 18px;">{{index+1}}.</b>
							<span>{{item.cinvcode}} — {{item.cinvname}}</span>
							<!--     -->
							
							
						</view>
						<form style="color: #0081FF;">
							<view class="scroll-view-item"  style="font-size: 32upx;">
								<view class="cu-form-group">
									<view class="title">订单编号：</view>
									<input :value="item.cpoid" placeholder="暂无数据" name="input" disabled="false"></input>
									<view v-if="item.burgent == 1" class="tag-urgent">急</view>
								</view>
								<view class="cu-form-group">
									<view class="title">业务类型：</view>
									<input :value="orderH.cbustype" placeholder="暂无数据" name="input" disabled="false"></input>
									<view v-if="item.bsamplePart == 1" class="tag-sample">样</view>
								</view>
								<view class="cu-form-group ">
									<view class="title">规格型号：</view>
									<input :value="item.cinvstd" placeholder="暂无数据" name="input" disabled="false"></input>
								</view>
								<view class="cu-form-group ">
									<view class="title">存货代码：</view>
									<input :value="item.cInvAddCode" placeholder="暂无数据" name="input" disabled="false"></input>
								</view>
								<view class="cu-form-group ">
									<view class="title" >送货数量：</view>
									<input :value="item.shQty" placeholder="暂无数据" name="input" disabled="false" ></input>
								</view>
								<view class="cu-form-group">
									<view class="title" style="color: red;font-weight: 1000;">到货数量：</view>
									<input v-model ="orderC[index].arrqty"  placeholder="暂无数据" type="number" ></input>
								</view>
								<view class="cu-form-group" v-if="i==2">
									<view class="title">仓库</view>
									<picker :id="index" :value="item.cwindex" :range="wArray">
										<view class="picker">
											{{item.cwindex == -1?"请选择仓库！": wArray[item.cwindex]}}
										</view>
									</picker>
								</view>
								<view class="cu-form-group ">
									<view class="title">送货箱数：</view>
									<input :value="item.shNum" placeholder="暂无数据" name="input" disabled="false"></input>
								</view>
								<view class="cu-form-group ">
									<view class="title" style="color: red;font-weight: 1000;">到货箱数：</view>
									<input v-model ="orderC[index].arrnum"  placeholder="暂无数据" name="input" type="number"></input>
								</view>
								<view class="cu-form-group ">
									<view class="title">计量单位：</view>
									<input :value="item.cComUnitName"  placeholder="暂无数据" name="input" disabled="false"></input>
								</view>
								<view class="cu-form-group ">
									<view class="title">生产日期：</view>
									<input :value="item.dscDate" placeholder="暂无数据" name="input" disabled="false"></input>
								</view>
								<view class="cu-form-group ">
									<view class="title">批次编号：</view>
									<input :value="item.cpatchno" placeholder="暂无数据" name="input" disabled="false"></input>
								</view>
							</view>
						</form>
					</view>
				</view>
			</block>
			<!-- </view> -->
		</scroll-view>

		<view class="action-section">
			<button type="primary" class="no-border confirm-btn"  @click="createOrder">提交</button>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		components: {

		},
		data() {
			return {
				CustomBar: this.CustomBar, //滚动定位用
				orderH: [],
				orderC: [],
				bcols:[],
				isShow:false,
				searchIds: [], //所有搜索数据
				searchListData: { //符合搜索条件的数据
					key: '', //搜索框key
					data: [], //符合条件的id们
					index: 0, //下标
				},
				searchVal: '', //输入框的值
				toSId: '', //跳转id
				invCache: [], //inv数据缓存，获取到inv数据应该给这个属性赋值备份。
				asnId: '',
				isShowAsn:false,
				isShowBz:false,
				isShowinv:false,
				isReC:false,
				wList:[],
				wArray:[],
				indexs:-1,
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'auditlist', 'corpCode']),
		},
		onShow(){
			
		},
		onLoad(options) {
			if(options.cbarcode){
				this.asnId = options.cbarcode
				this.sub()
			}
			
			uni.request({
				url:this.serverURL_a+'/bas/basWarehouse/treeData',
				data:{
					isShowCode : true,
					__sid:this.userInfo.sessionid
				},
				success:function(data){
					let ws= data.data;
					this.wList = [];
					if(ws != undefined && ws.length > 0){
						this.wArray = [];
						this.wList = ws;
						for(var i=0;i<ws.length;i++){
							this.wArray.push(ws[i].name);
						}
						var ie = uni.getStorageSync("indexs");
						if(ie != undefined && ie != '' && this.wArray.length >= ie){
							this.indexs = ie;
						}
					}else{
						this.$api.msg('该账套没有仓库信息，不能到货！');
						return;
					} 
				}.bind(this),
				fail:function(){
					this.$api.msg('服务已停止,请稍后再试');
					return;
				}.bind(this),
			});
		},
		methods: {
			viewDetail(id){
				
				uni.navigateTo({
					url: '/pages/codeandwh/detailList?asnId=' + id,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						Filter(data) {
				
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						// res.eventChannel.emit('initfilter', that.filter)
					}
				})
			},
			
			/** 扫发出声音*/
			makeSound(name){
				console.log("=====testClick=====");
				let src = '../../static/'+name+'.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			
			sub(){
				this.loadData();
			},
			focus(event) {
			},
			PickerChange(e) {
				for(var i=0;i<this.orderC.length;i++){
					if(this.orderC[i].cwindex == -1 || this.orderC[i].cwindex == this.indexs){
						this.orderC[i].cwindex = e.detail.value;
						this.orderC[i].cwhcode = this.wList[e.detail.value].id
					}
				}
				this.indexs = e.detail.value
				uni.setStorage({//缓存仓库状态
				    key: 'indexs',  
				    data: this.indexs  
				});
			},
			PickerChange1(e){
				var index = e.target.id;
				this.orderC[index].cwindex = e.detail.value;
				this.orderC[index].cwhcode = this.wList[e.detail.value].id
			},
			scroll() {
			},
			toBox() {
				if (this.orderC.length < 1) {
					this.$api.msg("无任何数据！");
					return;
				}
				let val = this.searchVal;
				if (!val) {
					this.orderC = this.invCache;
					this.searchListData.key = val;
					this.$api.msg("请搜索输入内容！");
					return;
				}
				if (val != this.searchListData.key) {
					this.orderC = [];
					this.searchListData = this.$options.data().searchListData;
					this.searchListData.key = val;
					let list = this.searchIds;
					let p = [];
					for (var i in list) {
						let index2;
						let str = list[i];
						index2 = str.match(val);
						if (index2 && index2.length > 0) {
							p.push(list[i]);
							this.orderC.push(this.invCache[i]);
						}
					}
					if (!p || p.length < 1) {
						this.orderC = this.invCache;
						this.$api.msg("未搜索到匹配内容！");
						return;
					}
					this.$api.msg("搜索到" + p.length + "条匹配内容！");
					for (var i in p) {
						let index = p[i].indexOf("||");
						let id = p[i].substring(0, index);
						this.searchListData.data.push(id);
					}
				} 
				let l = this.searchListData.data;
				let index = this.searchListData.index;
				this.toSId = l[index];
				if (index == (l.length - 1)) {
					this.searchListData.index = 0;
				} else {
					this.searchListData.index++;
				}
			},
			async loadData() {
				let id = this.asnId; //通过扫码得到送货单的id
				uni.request({
					url: this.serverURL_a + '/order/App/findData',
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					data: {
						id: id,
						__sid:this.userInfo.sessionid
					},
					success: function(data) {
						this.asnId = '';
						let asnData = data.data;
						if(asnData.iType == undefined){
							this.isShowAsn = false;
							this.orderH = [];
							this.orderC = [];
							this.$api.msg('无法连接服务，请重新登录！');
							
							return;
						}
						if(asnData.iType != 'NO'){
							var iType = asnData.iType;
							const bCloumns = asnData.bCloumns;
							const reMapH = asnData.reMapH;
							const reMaps = asnData.reMaps;
							if(iType == 'asn_' && reMaps.length > 0){
								//扫描送货单
								this.isShowAsn = true; 
								this.orderH = reMapH;
								this.orderC = reMaps;
								this.bcols = bCloumns;
								for(var i=0;i<this.orderC.length;i++){
									this.orderC[i].cwindex = this.indexs;
									this.orderC[i].cwhcode = this.wList[this.indexs].id;
								}
								for(var i=0;i<reMaps.length;i++){
									let idContent = 'index_' + reMaps[i].cinvcode + '||' + reMaps[i].cinvname + '_' + reMaps[i].cinvstd + '_' + reMaps[i].cInvAddCode +'_' + reMaps[i].shQty + '_' + reMaps[i].cpatchNo
									this.searchIds.push(idContent);
								}
							}else{
								if(!asnData.iType){
									this.$api.msg('请勿重复扫描送货单！');
									
									return;
								}
							}
							this.invCache = this.orderC;
							
						}else{
							this.isShowAsn = false;
							this.orderH = [];
							this.orderC = [];
							this.$api.msg('请扫描正确的标签');
							
							return;
						}
					}.bind(this),
					fail: function() {
						this.$api.msg('无法连接服务，请联系管理');
						return;
					}.bind(this)
				});
			},
			changeqty(index){
				return;
				var qty = this.orderC[index].arrqty;
				var ichangrate =  this.orderC[index].ichangrate;
				var num = qty / ichangrate;
				this.orderC[index].arrnum = num
			},
			toScan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						this.asnId = res.result;
						this.loadData();
					}.bind(this)
				});
			},
			
			createOrder(){
				uni.showModal({
					content: "是否提交!",
					success: function(res) {
						var _this = this;
						if (res.confirm) {
							if(this.isReC){
								this.$api.msg('请不要重复提交！');
								this.makeSound("sb");
								return;
							}
							this.isReC = true;
							if(!this.isShowAsn){
								this.$api.msg('请先扫描送货单条码！');
								this.isReC = false;
								this.makeSound("sb");
								return;
							}
							var index = this.indexs;
							if(index == '' && index != 0){
								this.$api.msg('请选择仓库！'+this.indexs);
								this.isReC = false;
								this.makeSound("sb");
								return;
							}
							this.orderH.cwhcode = this.wList[this.indexs].id;
							if(this.orderH.cwhcode == ''){
								this.$api.msg('请选择仓库！');
								this.isReC = false;
								this.makeSound("sb");
								return;
							}
							let delh = this.orderH;
							let dels = this.orderC;
							if(dels.length <= 0){
								this.$api.msg('暂无数据,不能提交！');
								this.isReC = false;
								this.makeSound("sb");
								return;
							}
							for(var i in dels){
								if(dels[i].shQty < dels[i].arrqty){
									this.$api.msg('到货数量不能超过送货数量,不能提交！');
									this.isReC = false;
									this.makeSound("sb");
									return;
								}
							}
							let red = JSON.stringify(delh);
							let redl = JSON.stringify(dels);
							uni.showLoading({
							    title: '数据提交中',
								 mask:true
							});
							uni.request({
								url:this.serverURL_a + '/order/App/addRdre?__ajax=json',
								data:{
									red:red,
									reds:redl,
									__sid:this.userInfo.sessionid
								},
								header: {
									'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
								},
								method: 'POST',
								success:function(data){
									uni.hideLoading();
									let ret = data.data;
									if(data.statusCode!="200"){
										uni.showModal({
										    content: ret.message,
											showCancel:false,
										});
										this.ishow = false;
										this.makeSound("sb");
										return;
									}
									if(ret.result=="true"){
										this.isShowAsn = false;
										this.orderH = [];
										this.orderC = [];
										this.isReC = false;
										uni.showModal({
											content: ret.message,
											showCancel:false,
											success: function(res) {
												return
											}
										});
										this.makeSound("cg");
									}else{
										uni.showModal({
											content: ret == ''?'系统异常，请联系管理员!':ret.message,
											showCancel:false,
											success: function(res) {
												return
											}
										});
										this.isReC = false;
										this.makeSound("sb");
										return;
									}
									
								}.bind(this),
								fail: function() {
									this.$api.msg('无法连接服务，请联系管理');
									this.isReC = false;
									return;
								}.bind(this)
							});
						} else if (res.cancel) {
							return
						}
					}.bind(this)
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: 100upx;
	}

	.indexes {
		position: relative;
	}
	
	/* 底部栏 */
	.action-section{
		/* #ifdef H5 */
		/* #endif */
		position:fixed;
		left: 75%;
		bottom:30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		background: rgba(255,255,255,.9);
		border-radius: 40upx;
		.checkbox{
			height:52upx;
			position:relative;
			image{
				width: 52upx;
				height: 100%;
				position:relative;
				z-index: 5;
			}
		}
		.clear-btn{
			position:absolute;
			left: 26upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			padding-left: 38upx;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius:0 50px 50px 0;
			opacity: 0;
			transition: .2s;
			&.show{
				opacity: 1;
				width: 120upx;
			}
		}
		.total-box{
			flex: 1;
			display:flex;
			flex-direction: column;
			text-align:right;
			padding-right: 40upx;
			.price{
				font-size: $font-lg;
				color: $font-color-dark;
			}
			.coupon{
				font-size: $font-sm;
				color: $font-color-light;
				text{
					color: $font-color-dark;
				}
			}
		}
		.confirm-btn{
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
		}
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}

	/* 样品和急件标签样式 */
	.tag-sample {
		display: inline-block;
		padding: 4px 12px;
		background-color: #FF9500;
		color: #fff;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 600;
		white-space: nowrap;
		box-shadow: 0 2px 4px rgba(255, 149, 0, 0.3);
	}

	.tag-urgent {
		display: inline-block;
		padding: 4px 12px;
		background-color: #FF3B30;
		color: #fff;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 600;
		white-space: nowrap;
		box-shadow: 0 2px 4px rgba(255, 59, 48, 0.3);
	}
</style>
